<template>
    <div class="mui-content commentInput">
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <p class="color1 text3-size mui-pull-left">{{comment.commentObject}}</p>
                <p class="color2 text3-size mui-pull-right mui-text-right">{{comment.commentType | commentTypeFilter}}</p>
            </li>
            <li class="star-li mui-table-view-cell mui-text-center">
                <div class="mui-text-center stars icons">
                    <i data-index="1" class="mui-icon mui-icon-star-filled"></i>
                    <i data-index="2" class="mui-icon mui-icon-star-filled"></i>
                    <i data-index="3" class="mui-icon mui-icon-star-filled"></i>
                    <i data-index="4" class="mui-icon mui-icon-star-filled"></i>
                    <i data-index="5" class="mui-icon mui-icon-star-filled"></i>
                </div>
            </li>
            <p class="scoreText">
                <span class="evaluateScore color4 text1-size" id="evaluateScore">5.0</span>
                <span class="color2 text1-size">/</span>
                <span class="evaluateTotalScore color2 text2-size">5.0</span>
            </p>
        </ul>
        <ul class="mui-table-view">
            <textarea id="status" name="status" @keydown="countChar('status','counter')" @keyup="countChar('status','counter')" v-model="comment.commentContent" rows="6" placeholder="服务很好，很满意" class="evaluateComment"></textarea>
            <div class="color2 text3-size par-10 mui-text-right">可以输入<span id="counter">140</span>字</div>
        </ul>
        <div class="operateBtn" @click="doComment()">
            <button class="mui-btn mui-btn-primary">评价</button>
        </div>
    </div>
</template>
<style>
    .commentInput .icons{font-size: 0.6rem !important;}
    .commentInput .icons i{font-size: 0.6rem;}
    .commentInput .scoreText{text-align: center; line-height: 0.6rem; font-size: 0.28rem;}
    .commentInput .scoreText span{ font-size: 0.3rem;}
    .commentInput .evaluateComment{border: none; padding: 10px; font-size: 0.28rem;height:136px;}
    .par-10{padding-right: 10px;}
</style>

<script type="text/ecmascript-6">
		import '../../fonts/mui.css';
        import Page from '../../base/Page'
        import { API } from '../../config/constants'
        export default new Page({
            data(){
                return{
                    comment:{objectId:0,commentType:0,commentObject:'',commentScore:5,commentContent:''}
                }
            },
            ready () {
                let that = this;
                mui.init();
                mui('.stars').on('click','i',function(){
                    var index = parseInt(this.getAttribute("data-index"));//获取当前元素的索引值
                    var parent = this.parentNode;//获取当前元素的父节点
                    var children = parent.children;//获取父节点下所有子元素
                    if(this.classList.contains("mui-icon-star")){//判断当前节点列表中是否含有.mui-icon-star元素
                        for(var i=0;i<index;i++){//亮星
                            children[i].classList.remove('mui-icon-star');
                            children[i].classList.add('mui-icon-star-filled');
                        }
                    }else{//重置已经亮星的元素
                        for (var i = index; i < 5; i++) {
                            children[i].classList.add('mui-icon-star')
                            children[i].classList.remove('mui-icon-star-filled')
                        }
                    }
                    document.getElementById("evaluateScore").innerHTML = index+'.0';
                    //设置评分
                    that.comment.commentScore = index;
                });
                //数据初始化
                that.initData();
            },
            components:{
            },
            methods:{
                initData:function (param) {
                    var param = JSON.parse(decodeURI(this.$route.query.param));
                    this.comment.objectId=param.objectId;

                },
                doComment:function () {
                    if (this.comment.commentContent === '') {
                        mui.toast('吐槽下我们的服务吧。',{ duration:'short', type:'div' });
                        return;
                    }else if(this.comment.commentContent.length > '140' ){
                        mui.toast('字数超出限制，请删减。',{ duration:'short', type:'div' });
                        return;
                    }

                    this.post(API.POST_COMMENT, this.comment, res => {
                        this.$route.router.go('/tip/success/comment');
                    });
                },
                countChar:function(textareaName,spanName) {
                    document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length > 0 ? document.getElementById(textareaName).value.length : 0;
                    }
            }
        });
</script>
